<template>
  <div class="page-search">
    <div class="page-search-form">
      <div v-for="(item, index) in searchData" :key="index" class="page-search-form-item">
        <div v-if="item.label" class="page-search-form-item-label">{{ item.label }}:</div>
        <div class="page-search-form-item-input">
          <el-input v-if="item.type === 'input'" v-model="searchParams[item.prop]" clearable :placeholder="item.placeholder" style="width: 100%;"  size="mini"/>
          <el-select v-if="item.type === 'select'" v-model="searchParams[item.prop]" clearable filterable :disabled="item.disabled" style="width: 100%" size="mini" :placeholder="item.placeholder" @change="selectChange($event, item.prop)">
            <el-option v-for="(opItem, val) in item.options" :key="val" :label="opItem.label" :value="opItem.value" />
          </el-select>
          <el-select v-if="item.type === 'select-multiple'" v-model="searchParams[item.prop]" multiple collapse-tags filterable clearable style="width: 100%" size="mini" :placeholder="item.placeholder">
            <el-option v-for="(opItem, val) in item.options" :key="val" :label="opItem.label" :value="opItem.value" />
          </el-select>
          <el-cascader
            v-if="item.type === 'el-cascader'"
            v-model="searchParams[item.prop]"
            clearable
            :options="item.options"
            style="width: 100%"
            :props="item.props"
          />
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="searchParams[item.prop]"
            type="date"
            value-format="yyyy-MM-dd"
            :placeholder="item.placeholder"
            style="width: 100%"
            @change="pickerchange($event, item.prop)" />
          <el-date-picker
            v-if="item.type === 'daterange'"
            v-model="searchParams[item.prop]"
            type="daterange"
            range-separator="至"
            start-placeholder="最小年龄"
            end-placeholder="最大年龄"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          />
          <el-date-picker
              v-if="item.type === 'datetimerange'"
              v-model="searchParams[item.prop]"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200%"
              size="mini">
          </el-date-picker>
          <el-date-picker
              v-if="item.type === 'datetime'"
              v-model="searchParams[item.prop]"
              type="datetime"
              :placeholder="item.placeholder"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%"
              size="mini">
          </el-date-picker>
          <el-radio-group v-if="item.type === 'radio'" v-model="searchParams[item.prop]" :placeholder="item.placeholder" style="width: 100%">
            <el-radio-button v-for="(opItem, val) in item.options" :key="val" :label="opItem.label" :rules="item.rules" />
          </el-radio-group>
          <el-button v-if="item.type === 'button'" type="primary" @click="item.method">{{ item.name }}</el-button>
        </div>
      </div>
    </div>
    <div class="page-search-btn">
      <slot />
    </div>
  </div>
</template>

<script>
import { debounce } from '@/utils'
export default {
  name: 'Search',
  props: {
    // 搜搜内容
    searchData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    // 搜索参数
    searchParams: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    },
    // multiple: {
    //   type: Boolean,
    //   default: false
    // },
    disableBranchNodes: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    searchParams: {
      handler(val) {
        this.searchParams = val
        this.updateSearchParams({ vm: this })
      },
      deep: true
    }
  },
  created() {
    this.searchData.forEach(item => {
      if (item.prop === 'laboratoryId') {
        if (window.localStorage.getItem('laboratoryId') > 0) {
          item.disabled = true
        } else {
          item.disabled = false
        }
      }
    })
  },
  methods: {
    updateSearchParams: debounce(({ vm }) => {
      vm.$emit('change', vm.searchParams)
    }, 500, true),
    selectChange(val, item) {
      this.$emit('selectChange', val, item)
    },
    pickerchange(val, item) {
      this.$emit('pickerchange', val, item)
    }
  }
}
</script>

<style lang="less" scoped>
.page-search{
  //margin-bottom: 20px;
  margin-left: 20px;
  padding-top: 20px;
  &-form{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    &-item{
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      margin-right: 20px;
      &-label{
        flex-shrink: 0;
        margin-right: 5px;
        font-size: 12px;
      }
      &-input{
        flex-shrink: 0;
        width: 200px;
      }
    }

  }
  &-btn{
    display: flex;
    align-items: center;
  }
  .page-search-form-item{
    ::v-deep{
      .el-input__inner {
        border: 1px solid rgba(0,231,231,0.4);
        background-color: rgba(0,231,231,0.051);
        color: #ffffff;
        &::placeholder {
          color: #999999;
        }
      }
      .page-search-form-item-label {
        color: #ffffff;
      }
    }

  }
}

</style>
